<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<% 
	String context = request.getContextPath(); 
	String basePath = request.getServerName() + ":" + request.getServerPort() + context + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>button</title>
		<link rel="stylesheet" type="text/css" href="<%=context%>/microcore/commoncss/basics.css"/>
		<style stype="text/css">
			body{background:#BCD68D;line-height: 40px;padding:0 30px}
		</style>
		<script src="<%=context%>/microcore/jquery-2.1.0.min.js"></script>
	</head>
	<body>
		<h1>输入框</h1>
		<p>样式文件：microcore/commoncss/basics.css</span><br />
			JS文件：microcore/commonjs/basics.js
		</p>
		<h1>普通输入框</h1>
		<!-- 行级输入框 -->
		<input type="text" class="input" />
		&lt;input type="text" class="input" />
		<br />
		<input type="text" class="input input-x" />
		&lt;input type="text" class="input input-x" />
		<br />
		<input type="text" class="input input-xl" />
		&lt;input type="text" class="input input-xl" />
		<br />
		<input type="text" class="input input-lg" />
		&lt;input type="text" class="input input-lg" />
		<br />
		<!-- 块级输入框 -->
		<input type="text" class="input input-row" />
		&lt;input type="text" class="input input-row" />
		<br />
		<input type="text" class="input input-x input-row" />
		&lt;input type="text" class="input input-x input-row" />
		<br />
		<input type="text" class="input input-xl input-row" />
		&lt;input type="text" class="input input-xl input-row" />
		<br />
		<input type="text" class="input input-lg input-row" />
		&lt;input type="text" class="input input-lg input-row" />
		<br />
		
		<h1>非空输入框</h1>
		<!-- 行级输入框 -->
		<input type="text" required class="input" />
		&lt;input type="text" required class="input" />
		<br />
		<input type="text" required class="input input-x" />
		&lt;input type="text" required class="input input-x" />
		<br />
		<input type="text" required class="input input-xl" />
		&lt;input type="text" required class="input input-xl" />
		<br />
		<input type="text" required class="input input-lg" />
		&lt;input type="text" required class="input input-lg" />
		<br />
		<!-- 块级输入框 -->
		<input type="text" required class="input input-row" />
		&lt;input type="text" required class="input input-row" />
		<br />
		<input type="text" required class="input input-x input-row" />
		&lt;input type="text" required class="input input-x input-row" />
		<br />
		<input type="text" required class="input input-xl input-row" />
		&lt;input type="text" required class="input input-xl input-row" />
		<br />
		<input type="text" required class="input input-lg input-row" />
		&lt;input type="text" required class="input input-lg input-row" />
		<br />
		
		<h1>带清空按钮输入框</h1>
		<!-- 行级输入框 -->
		<input type="text" class="input" /><span class="clear"></span>
		&lt;input type="text" class="input" />
		<br />
		<input type="text" class="input input-x" /><span class="clear"></span>
		&lt;input type="text" class="input input-x" />
		<br />
		<input type="text" class="input input-xl" /><span class="clear"></span>
		&lt;input type="text" class="input input-xl" />
		<br />
		<input type="text" class="input input-lg" /><span class="clear"></span>
		&lt;input type="text" class="input input-lg" />
		<br />
		<h1>搜索框</h1>
		<input type="text" class="input input-xl" /><span id="search" class="search"></span>
		&lt;input type="text" class="input input-xl" />&lt;span id="search" class="search"></span>
		
		<h1>输入框组合</h1>
		<div class="input-group">
	  		<span class="input-group-addon">@</span>
		  	<input type="text" class="input input-control" placeholder="twitterhandle">
		</div>
		&lt;div class="input-group"><br />
	  		&lt;span class="input-group-addon">@&lt;/span><br />
		  	&lt;input type="text" class="input input-control"><br />
		&lt;/div>
		<div class="input-group input-row">
	  		<span class="input-group-addon">@</span>
		  	<input type="text" class="input input-control" placeholder="twitterhandle">
		</div>
		&lt;div class="input-group input-row"><br />
	  		&lt;span class="input-group-addon">@&lt;/span><br />
		  	&lt;input type="text" class="input input-control"><br />
		&lt;/div>
		
		<div class="input-group">
			<input type="text" class="input input-control" placeholder="twitterhandle">
			<span class="input-group-addon">@</span>
		</div>
		&lt;div class="input-group"><br />
			&lt;input type="text" class="input input-control"><br />
			&lt;span class="input-group-addon">@&lt;/span><br />
		&lt;/div>
		
		<div class="input-group input-row">
			<input type="text" class="input input-control" placeholder="twitterhandle">
			<span class="input-group-addon">@</span>
		</div>
		&lt;div class="input-group  input-row"><br />
			&lt;input type="text" class="input input-control"><br />
			&lt;span class="input-group-addon">@&lt;/span><br />
		&lt;/div>
		
		<h1>下拉菜单</h1>
		用户：<div class="dropdown">
			<div class="input-group">
				<input type="hidden" data-value="user" />
				<input type="text" data-text="user" class="input-down input input-control" placeholder="请选择">
				<span class="input-group-addon down-btn" data-id="user">@</span>
			</div>
			<ul class="dropdown-menu" data-ul="user" >
				<li class="dropdown_txt" data-val="1">张三</li>
				<li class="dropdown_txt" data-val="2">李四</li>
				<li class="dropdown_txt" data-val="3">王五</li>
				<li class="dropdown_txt" data-val="4">码子</li>
			</ul>
		</div><br />
		&lt;div class="dropdown"><br />
			&nbsp;&nbsp;&lt;div class="input-group"><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" data-value="<span style="color:red;">user</span>" /><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" data-text="<span style="color:red;">user</span>" class="input-down input input-control" placeholder="请选择"><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="input-group-addon down-btn" data-id="<span style="color:red;">user</span>">@&lt;/span><br />
			&nbsp;&nbsp;&lt;/div><br />
			&nbsp;&nbsp;&lt;ul class="dropdown-menu" data-ul="<span style="color:red;">user</span>" ><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="dropdown_txt" data-val="1">张三&lt;/li><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="dropdown_txt" data-val="2">李四&lt;/li><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="dropdown_txt" data-val="3">王五&lt;/li><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="dropdown_txt" data-val="4">码子&lt;/li><br />
			&nbsp;&nbsp;&lt;/ul><br />
		&lt;/div><br />
		
		部门：<div class="dropdown input-row">
			<div class="input-group input-row">
				<input type="hidden" data-value="dept" />
				<input type="text" data-text="dept" class="input-down input input-control" placeholder="请选择">
				<span class="input-group-addon down-btn" data-id="dept">@</span>
			</div>
			<ul class="dropdown-menu" data-ul="dept" >
				<li class="dropdown_txt" data-val="1">财务部</li>
				<li class="dropdown_txt" data-val="2">研发部</li>
				<li class="dropdown_txt" data-val="3">产品部</li>
				<li class="dropdown_txt" data-val="4">行政部</li>
			</ul>
		</div><br />
		&lt;div class="dropdown input-row"><br />
			&nbsp;&nbsp;&lt;div class="input-group input-row"><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" data-value="<span style="color:red;">dept</span>" /><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" data-text="<span style="color:red;">dept</span>" class="input-down input input-control" placeholder="请选择"><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class="input-group-addon down-btn" data-id="<span style="color:red;">dept</span>">@&lt;/span><br />
			&nbsp;&nbsp;&lt;/div><br />
			&nbsp;&nbsp;&lt;ul class="dropdown-menu" data-ul="<span style="color:red;">dept</span>" ><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="dropdown_txt" data-val="1">财务部&lt;/li><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="dropdown_txt" data-val="2">研发部&lt;/li><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="dropdown_txt" data-val="3">产品部&lt;/li><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="dropdown_txt" data-val="4">行政部&lt;/li><br />
			&nbsp;&nbsp;&lt;/ul><br />
		&lt;/div><br />
	</body>
	<script src="<%=context%>/microcore/commonjs/basics.js"></script>
</html>
